<template>
  <div>
    <my-step v-model.number="value"></my-step>
    <my-pagination
      @currentChange="currentChange"
      :total="20"
      :page-size="5"
      :page-num="pagenum"
    ></my-pagination>
    <my-button @click.native="show = true">show mask</my-button>
    <my-mask :show="show" @hide="hide">
      <div>
        <h1>1111</h1>
        <h2>2222</h2>
      </div>
    </my-mask>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 10,
      pagenum: 3,
      show: false,
    };
  },
  methods: {
    currentChange(val) {
      this.pagenum = val;
    },

    hide() {
      console.log(111);
      this.show = false;
    },
  },
  created() {},
};
</script>
<style lang="scss"></style>
